import React from 'react';
import Chart from 'echarts-for-react';
import surface from 'echarts-gl';

class MySurface extends React.Component {

    setOption = {
        visualMap: {
            show: false,
            dimension: 2,
            min: 0,
            max: 1,
            inRange: {
                color: ['#a683e4','#7190cc','#447682','#6aacc9', '#589f9a',  '#ccdaa6',  '#f1f0ab',]
            }
        },
        xAxis3D: {
            type: 'value',
            name:"温度/℃",
            axisLine:{lineStyle:{color:'#fff'}},
            axisLabel:{textStyle:{color:'#fff'}}
        },
        yAxis3D: {
            type: 'value',
            name:"停留时间/min",
            axisLine:{lineStyle:{color:'#fff'}},
            axisLabel:{textStyle:{color:'#fff'}}
        },
        zAxis3D: {
            name:"概率",
            type: 'value',
            axisLine:{lineStyle:{color:'#fff'}},
            axisLabel:{textStyle:{color:'#fff'}}
        },
        grid3D: {
            viewControl: {
                // projection: 'orthographic'
            }
        },
        series: [{
            name:"",
            type: 'surface',
            wireframe: {
                // show: false
            },
            equation: {
                x: {
                    min:0,
                max:300,
                step: 2
                    
                },
                y: {
                    min:0,
                    max:300,
                    step: 2
                },
                z: function (x, y) {
                    return (1+Math.sin((x/100-2) * Math.PI) * Math.sin((y/100-2) * Math.PI))/2;
                }
            },

            // z: function (x, y) {
            //     if (Math.abs(x) < 0.1 && Math.abs(y) < 0.1) {
            //         return '-';
            //     }
            //     return Math.sin(x * Math.PI) * Math.sin(y * Math.PI);
            // }
            // data: [
            //     [-1,-1,0],[-0.5,-1,0],[0,-1,0],[0.5,-1,0],[1,-1,0],
            //     [-1,-0.5,0],[-0.5,-0.5,1],[0,-0.5,0],[0.5,-0.5,-1],[1,-0.5,0],
            //     [-1,0,0],[-0.5,0,0],[0,0,0],[0.5,0,0],[1,0,0],
            //     [-1,0.5,0],[-0.5,0.5,-1],[0,0.5,0],[0.5,0.5,1],[1,0.5,0],
            //     [-1,1,0],[-0.5,1,0],[0,1,0],[0.5,1,0],[1,1,0]
            // ]
            
        }]
    };
    render() {
        return (
            <div>
                <Chart
                    option={this.setOption}
                    notMerge
                    lazyUpdate
                    style={{ height: 300,width: 400}}
                />
            </div>
        )
    }
}
export default MySurface;
